<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签</title>
    <style>
        video {
            width: 300px;
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- 
        视频标签- video（★★★）
        基本使用
        当前 元素支持三种视频格式： 尽量使用 mp4格式
         <video src="media/mi.mp4"></video>

        兼容性写法
         <video  controls="controls"  width="300">
            <source src="move.ogg" type="video/ogg" >
            <source src="move.mp4" type="video/mp4" >
            您的浏览器暂不支持 <video> 标签播放视频
        </ video >


        属性很多，有一些属性需要大家重点掌握：
        autoplay 自动播放
        注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性
        width 宽度
        height 高度
        loop 循环播放
        src 播放源
        muted 静音播放

        <video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg">

        </video>

     -->

     <!-- <video src="../MV/弦子-天空之外(蓝光).mp4"></video> -->
     <video  controls="controls"  width="300" muted >
        <!-- <source src="move.ogg" type="video/ogg" > -->
        <source src="../MV/弦子-天空之外(蓝光).mp4" type="video/mp4" >
        <!-- 您的浏览器暂不支持 <video> 标签播放视频 -->
    </video>

    <!-- 
        音频标签- audio
        基本使用
        当前 元素支持三种视频格式： 尽量使用 mp3格式
        <audio src="media/music.mp3"></audio>
        兼容写法
        < audio controls="controls"  >
            <source src="happy.mp3" type="audio/mpeg" >
            <source src="happy.ogg" type="audio/ogg" >
            您的浏览器暂不支持 <audio> 标签。
        </ audio>
        <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

        小结
        音频标签和视频标签使用方式基本一致
        浏览器支持情况不同
        谷歌浏览器把音频和视频自动播放禁止了
        我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
        视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性
     -->
</body>
</html>